<template>
	<view>
		<!-- 顶部选项卡 -->
		<scroll-view 
		scroll-x 
		class="scroll-row" 
		:scroll-into-view="scrollInto"
		scroll-with-animation 
		style="height: 100rpx;">
			<view 
			v-for="(item,index) in tabBars" 
			:key="index" 
			class="scroll-row-item px-5 py-2" 
			:id="'tab'+index" 
			:class="tabIndex===index ? 'text-main font-lg font-weight-bold' : ''" 
			@click="changeTab(index)">
				{{item.name}}
			</view>
		</scroll-view>
		<swiper :duration="150" 
		:current="tabIndex" 
		@change="onChangeTab" 
		:style="'height:'+scrollH+'px;'">
			<swiper-item 
			v-for="(item,index) in newsList" 
			:key="index">
				<scroll-view 
				@scroll="scroll"
				scroll-y="true" 
				:style="'height:'+scrollH+'px;'" 
				@scrolltolower="loadmore(index)">
					<!-- 列表样式 -->
					<template v-if="item.list.length>0">
						<block v-for="(item2,index2) in item.list" :key="index2">
							<common-list @doSupport="doSupport" @Follow="Follow" :item="item2" :index="index2"></common-list>
							<divider></divider>
						</block>
						<!-- 上拉加载 -->
						<load-more :loadmore="item.loadmore"></load-more>
					</template>
					<template v-else>
						<no-thing></no-thing>
					</template>
					
				</scroll-view>
			</swiper-item>
		</swiper>
		
		
	</view>
		
</template>

<script>
	import commonList from '@/components/common/common-list';
	import LoadMore from '@/components/common/load-more';
	import NoThing from '@/components/common/no-thing';
	import {getHomeIndex} from "@/network/home.js";
	export default {
		components:{
			commonList,
			LoadMore,
			NoThing
		},
		// 监听导航点击按钮
		onNavigationBarButtonTap(e){
			this.checkAuth(()=>{
				uni.navigateTo({
					url:"/pages/add-input/add-input?tabBars="+JSON.stringify(this.tabBars)
				})
			})
		},
		data() {
			return {
				scrollInto:"",
				scroll_index:[],
				tabIndex:0,
				// 列表高度
				scrollH:600,
				// 顶部选项卡
				tabBars:[],
				// 数据
				newsList:[],
				// 索引
				index:[0],
			}
		},
		onLoad() {
			
			uni.getSystemInfo({
				success:res=>{
					// 单位：px
					this.scrollH = (res.windowHeight - uni.upx2px(100)) || 0
				}
			})
			this.getData()
			// 监听关注和顶踩
			uni.$on("updateFollowOrSupport",(e)=>{
				switch (e.type){
					case "follow":
					this.Follow(e.data.user_id)
						break;
					case "support":
					this.doSupport(e.data.news_list)
						break;
					case "comment":
					this.doComment(e.data.comment)
						break;
				}
			})
			uni.$on("Logout",()=>{
				this.getData()
				this.index = [0]
			})
			
		},
		// 页面卸载时调用
		onUnload() {
			uni.$off('updateFollowOrSupport',(e)=>{})
			uni.$off('Logout',(e=>{}))
		},
		methods: {
			scroll(event) {
				// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
				this.scroll_index[this.tabIndex].scroll = event.detail.scrollTop
			},
			// 上拉加载更多
			loadmore(index){
				let item = this.newsList[index]
				if(item.loadmore !=="上拉加载更多") return
				// 修改列表状态
				item.loadmore = '加载中...'
				// 模拟数据请求
				setTimeout(()=>{
					let sid=this.tabBars[index].id
					let mid = item.max_id
					getHomeIndex(sid,mid).then(res=>{
						let [err,data_list] = res
						if(err){
							uni.showToast({title:"请求失败"})
						}else{
							let data = data_list.data
							item.max_id =data.results.slice(-1)[0]?.id
							item.list = [...item.list,...data.results]
							item.loadmore = data.loadmore
						}
					})
				},2000)
			},
			// 获取数据
			getData(){
				getHomeIndex().then(res=>{
					let [err,data_list] = res
					
					this.tabBars = data_list.data.tabBars
					
					var arr = []
					for(let i=0;i < this.tabBars.length;i++){
						this.scroll_index.push({'scroll':0})
						arr.push({
							loadmore:"上拉加载更多",
							list:[],
							max_id:null
						})
					}
					this.newsList = arr
					let item = this.newsList[0]
					let data = data_list.data.list
					// 获取第一个分类数据
					item.list = data.results
					item.loadmore =  data.loadmore
					item.max_id = item.list.slice(-1)[0]?.id
				})
			},
			// 监听滑动
			onChangeTab(e){
				var eid = e.detail.current
				uni.pageScrollTo({
				    scrollTop: this.scroll_index[eid].scroll,
				    duration: 0
				});
				if(this.index.indexOf(eid)<=-1){
					let sid=this.tabBars[eid].id
					getHomeIndex(sid).then(res=>{
						let [err,data_list] = res
						if(err){
							uni.showToast({title:"请求失败"})
						}else{
							let item = this.newsList[eid]
							item.list=data_list.data.results
							item.loadmore =  data_list.data.loadmore
							item.max_id = item.list.slice(-1)[0]?.id
							this.index.push(eid)
						}
					})
				}		
				this.changeTab(eid)
			},
			// 关注功能
			Follow(user_id){
				this.newsList.forEach(tab=>{
					if(tab.list.length>0){
						tab.list.forEach(item=>{
							if(item.user==user_id){
								item.isFollow = !item.isFollow
							}
						})
					}
					return
				})
				
			},
			// 评论
			doComment(comment){
				this.newsList.forEach(tab=>{
					if(tab.list.length>0){
						tab.list.forEach(item=>{
							if(item.id==comment.id){
								item.comment_count = comment.count
							}
						})
					}
					return
				})
			},
			// 顶踩功能
			doSupport(news_list){
				let types = news_list.type
				let msg = types==="support" ? "点赞" : "点踩"
				this.newsList[this.tabIndex].list.forEach(item=>{
					if(item.id==news_list.id){
						// 如果已点过则进行取消操作
						if(item.news_list.type===types){
							item.news_list[types+"_count"]--
							item.news_list.type=""
							uni.showToast({title:"取消成功"})
							return
						}
						// 如果没点过取消，且没选中任何功能，则执行
						if(item.news_list.type){
							let my_type = item.news_list.type
							item.news_list[my_type+"_count"]--
						}
						// 如果什么都没选执行
						item.news_list.type=types
						item.news_list[types+"_count"]++
						uni.showToast({title:msg+"成功"})
					}
					return
				})
					
					
			},
			// 切换选项
			changeTab(index){
				if(this.tabIndex === index){
					return
				}
				this.tabIndex = index
				// 滚动到指定元素
				this.scrollInto = 'tab' + index
					
			}
		},
		// 跳转搜索框
		onNavigationBarSearchInputClicked(){
			uni.navigateTo({
				url:"/pages/search/search?type=post"
			})
		}
	}
</script>

<style>

</style>
